<template>
    <el-dialog v-model="updateDialog" title="作业修改" width="800">
        <el-form :inline="true" class="demo-form-inline" ref="formRef" :rules="formRules" :model="formData">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="题目" label-width="80" prop="homeworkTopic">
                        <el-input type="textarea" autocomplete="off" v-model="formData.homeworkTopic"  style=" width: 280px;" :rows="6"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="参考答案" label-width="80" prop="homeworkAnswer">
                        <el-input type="textarea" autocomplete="off" v-model="formData.homeworkAnswer" style="width: 280px;" :rows="6"/>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialog = false">关闭</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
                <el-button @click="update(formRef)" type="primary" :disabled="!formData.homeworkTopic || !formData.homeworkAnswer">修改</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineEmits, defineModel } from "@vue/runtime-core";
import { reactive, ref } from "vue";
import axios from '@/axios/index.js'
import { ElMessage } from "element-plus";

let updateDialog = defineModel('updateDialog')
const emit = defineEmits(['loadData'])
const formRef = ref()
let rowData = defineProps(['rowData'])



let formData = reactive({
    id: rowData.rowData.id,
    courseId: rowData.rowData.courseId,
    homeworkTopic: rowData.rowData.homeworkTopic,
    homeworkAnswer: rowData.rowData.homeworkAnswer,
    homeworkBy: rowData.rowData.homeworkBy
})


function demo() {
    console.log(formData);

}
demo()
//表单校验
const formRules = reactive({
    homeworkTopic:[
    { required: true, message: '题目不能为空', trigger: 'blur' },
    {max: 255, message: '题目字数不能过长', trigger: 'blur' }
  ],
  homeworkAnswer:[
    { required: true, message: '参考答案不能为空', trigger: 'blur' },
    {max: 255, message: '参考答案字数不能过长', trigger: 'blur' }
  ]
});

//保存用户
function update() {
    formData.homeworkBy = formData.courseId
    axios.post('/courseHomework/update', formData).then(resp => {
        ElMessage({
            message: resp.data.message,
            type: resp.data.code == 200 ? 'success' : "error",
            duration: 1500,
            onClose: function () {
                updateDialog.value = false
                emit('loadTableData')
                //清除表单数据
                formData = reactive({
                    courseId: '',
                    homeworkTopic: '',
                    homeworkAnswer: '',
                    homeworkBy: ''
                })
            }
        })
    })
}

//重置表单校验
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.demo-form-inline {
    margin-left: 30px;
}

.demo-form-inline el-input {
    --el-input-width: 220px;
}

.demo-form-inline el-radio-group {
    --el-input-width: 220px;
}

.demo-form-inline el-date-picker {
    --el-input-width: 220px;
}

.avatar-uploader el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader el-upload:hover {
    border-color: var(--el-color-primary);
}

el-icon.avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 40px;
    height: 40px;
    display: block;
}

.el-select {
    height: 60px;
    width: 300px;
}
</style>